<template>
	<div class="container">
		<a-modal
			:visible="visible"
			:body-style="{height:'600px',overflowY: 'auto'}"
			:closable="false"
		>
			<template #title>
				<div v-if="flowData"></div>
				<div>{{ flowData.name!==null?flowData.name:'流程详情' }} <span>【{{ flowData.id!==null?'ID:'+flowData.id:'' }}】 </span><span>【{{ flowData.status!==null?'status:'+flowData.status:'' }}】 </span></div>
			</template>
			<template #footer>
				<a-button @click="closeMessage">关闭</a-button>
			</template>
			<div>
				<flow-node-tmp
					ref="flowNodeRef"
					:show="visible"
					:flow-id="dataSource.flowId"
					:show-edit="dataSource.showEdit"
					:module-id="dataSource.moduleId"
					:item-id="dataSource.itemId"
					@change="changeFlowNodeTmp"
				></flow-node-tmp>
			</div>

		</a-modal>
	</div>
</template>
<script setup>
// 流程详情 弹窗
import {
	ref,
	reactive,
	computed,
	getCurrentInstance,
	watch,
	onMounted,
} from "vue";
const { proxy } = getCurrentInstance();

import flowNodeTmp from "@/components/FlowNodeTmp";
import { useRoute } from "vue-router";
import { post } from "../utils";
import router from "../router";
// const props = defineProps({
// 	showEdit: {
// 		type: Boolean,
// 		required: false,
// 		default: true,
// 	},
// 	flowId: {
// 		type: Number,
// 		required: true,
// 		default: 0,
// 	}, // 模块标识
// 	moduleId: {
// 		type: String,
// 		required: false,
// 		default: "",
// 	},
// 	// 模块下内容id
// 	itemId: {
// 		type: Number,
// 		required: false,
// 		default: 0,
// 	},
// });
const dataSource = reactive({ flowId: 0 });
const visible = ref(false);
const flowNodeRef = ref(null);

const flowData = ref({});
const showModal = (item) => {
	for (const key in item) {
		dataSource[key] = item[key];
	}
	visible.value = true;
};
const emit = defineEmits(["change"]);

const changeFlowNodeTmp = (e) => {
	if (e.act === "setData") {
		flowData.value = e.data;
	}
	emit("change", e);
};

const setData = (data) => {
	visible.value = true;
	if (data) {
		flowData.value = data;
		flowNodeRef.value.setData(data);
	}
};
const restData = () => {
	visible.value = true;
	if (flowNodeRef.value) {
		flowNodeRef.value.restData();
	}
};
defineExpose({ showModal, setData, restData });
const closeMessage = () => {
	// console.log("关闭");
	visible.value = false;
	// dataSource.value = {};
	// dataSource.value = null;
	// console.log(visible.value, dataSource.value);
};
</script>

<style scoped  lang="less">
.container {
	background: #fff;
	padding: 12px;
}
</style>